import { View, Image, Text } from '@tarojs/components';
import { useState } from 'react';
import Taro from '@tarojs/taro';
import classname from 'classnames';
import { AtIcon, AtTag } from 'taro-ui';
import rankIcon1 from '@/assets/images/search/rank_1.png';
import rankIcon2 from '@/assets/images/search/rank_2.png';
import rankIcon3 from '@/assets/images/search/rank_3.png';
import fireIcon from '@/assets/images/search/fire.png';
import './index.scss';

export const getLocalHistory = () => {
  const history = Taro.getStorageSync('searchHistory');
  if (history) {
    return history.split(',').reverse();
  }
  return [];
};

export default function ({ onHandle, historyData }) {
  const [current, setCurrent] = useState('goods');
  const [historyTag, setHistoryTag] = useState(getLocalHistory());
  const tabList = [
    { title: '商品榜', value: 'goods' },
    { title: '服务榜', value: 'services' },
  ];
  const _onClear = () => {
    Taro.removeStorageSync('searchHistory');
    setHistoryTag([]);
  };
  const _onHandleHistory = (str: string) => {
    onHandle(str);
  };
  const _onTabChange = (value) => {
    console.log(value);
    setCurrent(value);
  };

  return (
    <View className="search-record">
      <View className="title-section">
        <View className="left-text">历史记录</View>
        <View className="right-text" onClick={_onClear}>
          <AtIcon value="trash" size="20" color="#F00" />
        </View>
      </View>
      <View className="history-container">
        {historyTag.map((item) => {
          return (
            <AtTag key={item} onClick={() => _onHandleHistory(item)}>
              {item}
            </AtTag>
          );
        })}
      </View>
      <View className="rank-titles">
        {tabList.map((item) => {
          return (
            <View
              key={item.value}
              className={classname('rank-tabs', current === item.value ? 'current' : '')}
              onClick={() => _onTabChange(item.value)}
            >
              {item.title}
            </View>
          );
        })}
      </View>
      <View className="rank-list">
        {historyData[current].map((item, key) => {
          return (
            <View
              key={item.id}
              className="rank-item"
              onClick={() => onHandle(current === 'goods' ? item.goods_name : item.service_name)}
            >
              {key === 0 ? <Image className="rank-icon" src={rankIcon1} /> : null}
              {key === 1 ? <Image className="rank-icon" src={rankIcon2} /> : null}
              {key === 2 ? <Image className="rank-icon" src={rankIcon3} /> : null}
              {key > 2 ? <Text className="order-num">{key}</Text> : null}
              {item.goods_name}
              {key < 2 ? (
                <View className="hot-tag">
                  <Image className="fire-icon" src={fireIcon} />
                  HOT
                </View>
              ) : null}
            </View>
          );
        })}
        {historyData[current].length === 0 && <View>暂无热销榜单</View>}
      </View>
    </View>
  );
}
